<template>
  <!-- 里程数修改申请页面 -->
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="120" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="mileage-modify-search"
      :isSelectColumn="false"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <AjaxButton size="small" type="primary" :click="exportClick">导出</AjaxButton>
      </template>
    </FilterTable>

    <!-- 选择经销商 -->
    <BaseDialog :visible.sync="dealerAction.visible" :title="dealerAction.title" destroyOnClose :containerStyle="{ height: 'calc(100% - 70px)', overflow: 'auto', paddingBottom: '70px' }">
      <searchDealerPanel :type="dealerAction.type" :row="dealerAction.data" @close="closeDealerDialog" @saveDialog="saveDealerDialog" />
    </BaseDialog>

    <BaseDialog :visible.sync="action.visible" :title="action.title" destroyOnClose :containerStyle="{ height: 'calc(100% - 70px)', overflow: 'auto', paddingBottom: '70px' }">
      <mileageModifyDialog :type="action.type" :row="action.data" @close="closeDialog" @saveDialog="saveDialog" />
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import dictCode from '@/utils/dictCode';
import { exportExcelFile } from '@/utils';
import { selectMileageChangeFactory, applyMileageChange, factoryExportMileage, getAllDealer } from '@/api/repair/repairBusiness/mileageModify/index.js';
import mileageModifyDialog from './mileageSearchDialog.vue';
import searchDealerPanel from '@/pages/repair/mileageDateChange/mileageApprove/searchDealerPanel';
export default {
  name: 'mileage-modify-search',
  components: { mileageModifyDialog, searchDealerPanel },
  mixins: [dictionary],
  data() {
    return {
      fetchParams: { xhrAbort: true },
      fetchApi: selectMileageChangeFactory,
      columns: this.createTableColumns(),
      topFilterList: this.createTopFilterList(),
      dealerAction: { type: '', visible: false, title: '选择经销商', data: null },
      action: { type: '', visible: false, title: '', data: null },
      allDealer: []
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getAllDealer();
  },
  methods: {
    // 获取所有的经销商
    async getAllDealer() {
      let res = await getAllDealer();
      if (res.resultCode == 200) {
        let allDealer = res.data.map(x => ({ text: x.dealerShortname, value: x.dealerCode + '' }));
        this.allDealer = allDealer;
        this.columns.find(x => x.dataIndex === 'ownerShortName').dictItems = allDealer;
      }
    },
    async exportClick() {
      const [err, data] = await this.$refs.topFilter.GET_FORM_DATA();
      factoryExportMileage(data).then(res => {
        exportExcelFile(res.data, '车辆里程数变更报告表');
      });
    },
    closeDealerDialog() {
      this.dealerAction.visible = false;
    },
    saveDealerDialog([params]) {
      this.dealerAction.visible = false;
      this.topFilterList.find(x => x.fieldName === 'ownerCode').initialValue = params.dealerCode;
      this.topFilterList.find(x => x.fieldName === 'ownerShortName').initialValue = params.dealerShortname;
    },
    async closeDialog() {
      this.action.visible = false;
      const [err, data] = await this.$refs.topFilter.GET_FORM_DATA();
      let params = { ...this.fetchParams, ...data };
      if (params.ownerShortName && params.ownerShortName.length) {
        params.ownerCode = this.topFilterList.find(x => x.fieldName === 'ownerCode').initialValue;
      } else {
        params.ownerCode = undefined;
      }
      this.fetchParams = params;
    },
    async saveDialog() {
      const [err, data] = await this.$refs.topFilter.GET_FORM_DATA();
      let params = { ...this.fetchParams, ...data };
      if (params.ownerShortName && params.ownerShortName.length) {
        params.ownerCode = this.topFilterList.find(x => x.fieldName === 'ownerCode').initialValue;
      } else {
        params.ownerCode = undefined;
      }
      this.fetchParams = params;
    },
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'ownerCode',
          hidden: true,
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'ownerShortName',
          placeholder: '请选择...',
          initialValue: '',
          readonly: true,
          unitRender: () => {
            return (
              <el-button
                icon="el-icon-search"
                onClick={() => {
                  this.dealerAction = { type: '', visible: true, title: '选择经销商', data: {} };
                }}
              ></el-button>
            );
          }
        },
        {
          type: 'INPUT',
          label: '里程变更申请单号',
          fieldName: 'changeNo',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入...'
        },

        {
          type: 'SELECT',
          label: '申请状态',
          fieldName: 'status',
          placeholder: '请选择...',
          itemList: this.createDictList('9993').filter(x => x.value !== 99931001 && x.value !== 99931003)
        },
        {
          type: 'RANGE_DATE',
          label: '申请日期',
          fieldName: 'startDate|stopDate',
          placeholder: '请选择...',
          itemList: []
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          minWidth: '100',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.emitFun(props.row, 'show')}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'ownerCode',
          width: 150,
          sorter: true
        },
        {
          title: '经销商名称',
          dataIndex: 'ownerShortName',
          width: 150,
          sorter: true,
          showOverflowTooltip: true,
          render: props => {
            // 不能翻译就显示code
            let ownerShortName = props.row.ownerCode;
            if (this.allDealer.length) {
              let item = this.allDealer.find(x => x.value == props.row.ownerCode);
              if (item) {
                ownerShortName = item.text;
                props.row.ownerShortName = item.text; // 每一条数据增加一个字段，后台不存前端显示用
              }
            }
            return <span>{ownerShortName}</span>;
          }
        },
        {
          title: '里程变更申请单号',
          dataIndex: 'changeNo',
          sorter: true,
          width: 200
        },
        {
          title: '维修工单号',
          dataIndex: 'roNo',
          sorter: true,
          width: 200
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          sorter: true,
          width: 200
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true
        },
        {
          title: '原里程',
          dataIndex: 'beforeMileage',
          sorter: true
        },
        {
          title: '变更里程',
          dataIndex: 'afterMileage',
          sorter: true
        },
        {
          title: '申请状态',
          dataIndex: 'status',
          sorter: true,
          dictItems: this.createDictList('9993')
        },
        {
          title: '是否关联索赔',
          dataIndex: 'isClaim',
          sorter: true,
          dictItems: this.createDictList('1004')
        },

        {
          title: '申请时间',
          dataIndex: 'changeDate',
          width: 150,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
          sorter: true
        },
        {
          title: '申请人',
          dataIndex: 'ownerName',
          sorter: true,
          width: 200
        },
        {
          title: '申请原因',
          dataIndex: 'remark',
          sorter: true
        },
        {
          title: '审核时间',
          dataIndex: 'logCreatedAt',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss'
        }
      ];
    },

    emitFun(val, type) {
      this.action = { type: type, title: '里程变更查询', data: val, visible: true };
    },
    changeHandle(val) {
      // 搜索和重置都走
      let params = { ...this.fetchParams, ...{ xhrAbort: false }, ...val };
      if (params.ownerShortName && params.ownerShortName.length) {
        params.ownerCode = this.topFilterList.find(x => x.fieldName === 'ownerCode').initialValue;
      } else {
        params.ownerCode = undefined;
      }
      this.fetchParams = params;
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
